<template>
    <el-dialog
        title="已匹配的交易流水信息"
        :visible.sync="dialogShow"
        :modal="false"
        fullscreen
        :before-close="handleClose"
    >
        <div style="color: red; padding-bottom: 10px">
            正在匹配信息：发票号码 {{ selectRow.fphm }}，第{{
                (selectRow.selfIndex || 0) + 1
            }}行，金额（不含税）{{ selectRow.je }}元，税额{{ selectRow.se }}元。
        </div>
        <el-form ref="form" :model="formObj" label-width="70px">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="获票人名称" label-width="80px">
                        <el-input
                            v-model="formObj.hprmc"
                            size="small"
                        ></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="10">
                    <el-form-item label="业务编号">
                        <el-input
                            v-model="formObj.ywbh"
                            :disabled="true"
                            size="small"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="0px">
                        <el-select
                            v-model="formObj.ywdhlx"
                            placeholder="请选择"
                            style="width: 120px; padding-left: 5px"
                            size="small"
                            :disabled="true"
                        >
                            <el-option label="投保单号" value="1"></el-option>
                            <el-option label="汇交单号" value="2"></el-option>
                            <el-option
                                label="学平险受理号"
                                value="3"
                            ></el-option>
                        </el-select>
                        <el-input
                            :disabled="true"
                            style="width: calc(100% - 130px); padding-left: 4px"
                            size="small"
                            v-model="formObj.tbdh"
                            placeholder="请输入"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="险种代码" label-width="80px">
                        <el-input
                            v-model="formObj.xzdm"
                            size="small"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="交易日期">
                        <el-date-picker
                            size="small"
                            v-model="date1"
                            type="daterange"
                            range-separator="~"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            style="width: 100%"
                            clearable
                            @change="onClear"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="20px">
                        <el-button
                            type="primary"
                            @click="onSubmit"
                            size="small"
                        >
                            查询
                        </el-button>
                        <el-button
                            type="primary"
                            @click="onResize"
                            size="small"
                        >
                            重置
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <tableList
            ref="tableListPageRef"
            border
            heightMin="200"
            :keySet="keySet2"
            :tableData="flowList"
            :paginationShow="true"
            :pageNumber="pages.current"
            :pageSize="pages.size"
            :total="pages.total"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
            :showSelection="true"
            @handleSelectionChange="handleSelectionChange"
        ></tableList>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="save" size="small" :disabled='this.selectList.length == 0'>
                确认
            </el-button>
            <el-button @click="handleClose" size="small">取消</el-button>
        </div>
    </el-dialog>
</template>
<script>
import tableList from '@/components/tableList/index.vue'
import { queryFlowByAutoOrHand, itemMatchFlow } from '@/api/matchFlow.js'
export default {
    name: 'matchFlowDialog',
    model: {
        prop: 'dialogShow',
        event: 'change',
    },
    props: {
        dialogShow: {
            type: Boolean,
            default: false,
        },
        selectRow: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            date1: ['', ''],
            formObj: {
                hprmc: '',
                ywbh: '',

                ywdhlx: '', // 下拉框类型
                tbdh: '', // 下拉框的值

                xzdm: '', // 险种代码
            },
            flowList: [],
            pages: {
                current: 1,
                total: 0,
                size: 10,
            },
            selectList: [],

            keySet2: [
                {
                    label: '状态',
                    englishName: 'czlx',
                    width: 60,
                    isSlot: true,
                    slotName: 'czlx',
                },
                {
                    label: '交易号',
                    englishName: 'jyls',
                },
                {
                    label: '交易日期',
                    englishName: 'jyrq',
                },
                {
                    label: '业务编号',
                    englishName: 'ywbh',
                    width: '150',
                },
                {
                    label: '产品代码',
                    englishName: 'cpdm',
                },
                {
                    label: '原业务编号',
                    englishName: 'ysjyls',
                    width: '150',
                },
                {
                    label: '业务类型',
                    englishName: 'ywlxbm',
                },
                {
                    label: '产品名称',
                    englishName: 'cpmc',
                },
                {
                    label: '保全项目代码',
                    englishName: 'bqxmdm',
                },
                {
                    label: '保全项目名称',
                    englishName: 'bqxmmc',
                },
                {
                    label: '未开票金额',
                    englishName: 'wkpje',
                    isSlot: true,
                    slotName: 'wkpje',
                },
                {
                    label: '交易金额（含税）',
                    englishName: 'jyje',
                    width: 120,
                    isSlot: true,
                    slotName: 'jyje',
                },
                {
                    label: '交易金额（不含税）',
                    englishName: 'bhsje',
                              width: '180',
                    isSlot: true,
                    slotName: 'bhsje',
                },
                {
                    label: '税率',
                    englishName: 'sysl',
                },
                {
                    label: '税额',
                    englishName: 'xxse',
                    isSlot: true,
                    slotName: 'xxse',
                },
                {
                    label: '获票人名称',
                    englishName: 'kfhm',
                    width: 150,
                },
                {
                    label: '纳税人识别号',
                    englishName: 'nsrsbh',
                    width: 150,
                },
                {
                    label: '是否个人业务',
                    englishName: 'isgryw',
                },
                {
                    label: '证件类型',
                    englishName: 'zjlx',
                },
                {
                    label: '证件号码',
                    englishName: 'zjhm',
                    width: 150,
                },
                {
                    label: '险种代码',
                    englishName: 'xzdm',
                },
                {
                    label: '险种简称',
                    englishName: 'xzjc',
                },
                {
                    label: '险种全称',
                    englishName: 'xzqc',
                },
                {
                    label: '备注',
                    englishName: 'bz',
                },
                {
                    label: '交易机构',
                    englishName: 'jyjg',
                },
                {
                    label: '投保单号',
                    englishName: 'tbdh',
                },
                {
                    label: '汇交单号',
                    englishName: 'hjdh',
                },
                {
                    label: '学平险受理号',
                    englishName: 'xpxslh',
                },
                {
                    label: '税优识别码',
                    englishName: 'sysbm',
                },
                {
                    label: '缴费方式',
                    englishName: 'jffs',
                },
                {
                    label: '缴费起期',
                    englishName: 'jfqsrq',
                },
                {
                    label: '缴费止期',
                    englishName: 'jfzzrq',
                },
                {
                    label: '手机号',
                    englishName: 'sjh',
                },
                {
                    label: '电子邮箱',
                    englishName: 'dzyx',
                },
                {
                    label: '服务人员姓名 ',
                    englishName: 'fwryxm',
                },
                {
                    label: '服务人员编号',
                    englishName: 'fwrybh',
                },
                {
                    label: '部',
                    englishName: 'bmc',
                },
                {
                    label: '区',
                    englishName: 'qmc',
                },
                {
                    label: '组',
                    englishName: 'zmc',
                },
                {
                    label: '来源系统',
                    englishName: 'sjly',
                },
                {
                    label: '供数日期',
                    englishName: 'gsrq',
                },
            ],
        }
    },

    methods: {
        onResize() {
            this.date1 = ['', '']
            this.formObj = {
                hprmc: '',
                ywbh: this.selectRow.ggxh,
                tbdh: this.selectRow.ywdh,
                ywdhlx: this.selectRow.ywdhlx, // 业务单号类型
                xzdm: '',
            }
        },
        handleCurrentChange(val) {
            this.pages.current = val
            this.getList()
        },
        handleSizeChange(val) {
            this.pages.current = 1
            this.pages.size = val
            this.getList()
        },
        handleSelectionChange(val) {
            console.log(val)
            // 选择一个,就选中一个
            if (val.ids) {
                this.selectList = val.ids.map((item) => item.id) || []
            }
        },
        getList() {
            let obj = {
                pageNo: this.pages.current,
                pageSize: this.pages.size,

                cxlx: 0,
                hprmc: this.formObj.hprmc,
                jyrqq: this.date1[0],
                jyrqz: this.date1[1],
                // hjdh: this.formObj.tbdh,
                // tbdh: this.formObj.tbdh,
                // xpxslh: this.formObj.tbdh,
                xzdm: this.formObj.xzdm, // 	险种代码
                ywbh: this.formObj.ywbh, // 业务编号
            }
            if (this.formObj.ywdhlx == 1) {
                obj.tbdh = this.formObj.tbdh
            } else if (this.formObj.ywdhlx == 2) {
                obj.hjdh = this.formObj.tbdh
            } else if (this.formObj.ywdhlx == 3) {
                obj.xpxslh = this.formObj.tbdh
            }
            queryFlowByAutoOrHand(obj).then(({ code, data }) => {
                if (code == 200) {
                    setTimeout(() => {
                        this.flowList = data.records.map((item) => {
                            return {
                                ...item,
                            }
                        })
                        this.pages.current = data.current
                        this.pages.size = data.size
                        this.pages.total = data.total
                    })
                }
            })
        },

        onClear(val, b) {
            if (val === null) {
                this.date1 = ['', '']
            }
        },
        save() {
            let p = {
                applyId: this.$store.state.invoice2.invoinceFormStart1.busId,
                czlx: 0,
                iviid: this.selectRow.iviid,
                rdidList: this.selectList,
            }
            itemMatchFlow(p).then(({ data, code, message }) => {
                console.log(data)
                if (code == 200) {
                    this.$message.success(message || data)
                    this.$emit('searchCbMatch', false)
                }
            })
        },
        onSubmit() {
            this.getList()
            // this.$emit('searchCbMatch', false)
        },

        handleClose() {
            this.$emit('change', false)
        },
        resetParams() {
            this.formObj = {
                hprmc: '',
                ywbh: this.selectRow.ggxh,
                tbdh: this.selectRow.ywdh,
                ywdhlx: this.selectRow.ywdhlx, // 业务单号类型
                xzdm: '',
            }
            this.date1 = ['', '']
            this.flowList = []
            this.selectList = []
            this.pages = {
                current: 1,
                total: 0,
                size: 10,
            }
        },
    },
    watch: {
        dialogShow(newV) {
            if (newV) {
                this.resetParams()
                this.getList()
            }
        },
    },
    components: {
        tableList,
    },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog_wrapper .dialog-fade-leave-active {
    animation-fill-mode: forwards;
}

::v-deep .el-dialog__body {
    padding: 0 20px 10px !important;
    max-height: 100% !important;
}
::v-deep .el-dialog {
    margin-top: 0px !important;
}

::v-deep .el-row {
    margin-bottom: 12px;
}
</style>

<style lang='scss'>
@media (max-height: 850px) and (min-height: 500px) {
    // .el-dialog{
    //     margin-top: 7vh !important;
    // }
    .el-dialog {
        margin-top: 4vh !important;
    }
    .el-dialog__body {
        max-height: 80vh !important;
    }
}
@media (max-height: 3600px) and (min-height: 850px) {
    .el-dialog {
        margin-top: 15vh !important;
    }
}
</style>